<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班组工资上报</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/font/iconfont.css" media="all">
    <link rel="stylesheet" href="../js/formSelects/formSelects-v4.css" media="all">
    <style>
        .other_name {
            display: inline-block;
            margin-right: 10px;
            cursor: pointer;
        }
        .other_name>i {
            margin-left: 5px;
        }
        .other_name>i:hover {
            color: #FFFFFF;
        }

        .layui-form-label{
            width:140px;
        }
        .layui-input-block{
            margin-left: 170px;
        }
        a{
            color:#fff;
        }
        a:hover {
            color: #00c0ef;
        }
        legend{
            color: #00c0ef
        }
    </style>
</head>
<body>


<div style="margin-top: 40px; margin-right: 30px;">
    <form class="layui-form" action=""  lay-filter="dataForm">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>基本信息</legend>
        </fieldset>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">所属项目</label>
                <div class="layui-input-inline" style="width: 300px">
                    <input type="text" name="projectname"  id="projectname"  placeholder="所属项目" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">劳务公司名称</label>
                <div class="layui-input-inline" style="width: 300px">
                    <input type="text" name="companyname"  id="companyname"  placeholder="劳务公司名称" readonly class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">工种</label>
                <div class="layui-input-inline" style="width: 300px">
                    <input type="text" name="profession"  id="profession"  placeholder="工种"  readonly class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">涉及人数</label>
                <div class="layui-input-inline" style="width: 300px">
                    <input name="number" id="number"   placeholder="涉及人员"  class="layui-input">
                </div>
            </div>
        </div>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>必填信息</legend>
        </fieldset>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color:red">*</span>应发工资金额</label>
                <div class="layui-input-inline" style="width: 300px">
                    <input type="text" name="pay" id="expect_pay"  lay-verify="required|float2" placeholder="金额(￥)" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color:red">*</span>实际下发工资金额</label>
                <div class="layui-input-inline" style="width: 300px">
                    <input type="text" name="pay" id="pay"  lay-verify="required|float2" placeholder="金额(￥)" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color:red">*</span>所付工资年份</label>
                <div class="layui-input-inline" style="width: 300px">
                    <select name="year"  id="year" lay-verify="required"   lay-search="">
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"><span style="color:red">*</span>所付工资月份</label>
                <div class="layui-input-inline" style="width: 300px">
                    <select name="month"  id="month" lay-verify="required"   lay-search="">
                        <option value="">请选择</option>
                        <option value="01">01</option>
                        <option value="02">02</option>
                        <option value="03">03</option>
                        <option value="04">04</option>
                        <option value="05">05</option>
                        <option value="06">06</option>
                        <option value="07">07</option>
                        <option value="08">08</option>
                        <option value="09">09</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color:red">*</span>凭据</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-normal" id="btnChooseFiles">选择多文件</button>
                    <span style="color: #9F9F9F;font-size: 12px">支持扩展名：jpeg|jpg|png|gif|zip|rar|xls|xlsx|doc|docx|ppt|pptx|pdf|vsd|vsdx|txt|csv</span>
                    <div class="layui-upload-list">
                        <table class="layui-table">
                            <thead>
                            <tr><th>文件名</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr></thead>
                            <tbody id="uploadList"></tbody>
                        </table>
                    </div>
                    <button type="button" class="layui-btn layui-btn-normal" id="btnUpoadAction" lay-verify="ver_file">开始上传</button>
                </div>
            </div>
        </div>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
            <legend>信息提交</legend>
        </fieldset>

        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: center;">
                <button id="btnSub" class="layui-btn" lay-filter="formSubmit"  lay-submit="">提交</button>
            </div>
        </div>
    </form>
</div>

</body>
<script src="../assets/layui/layui.js"></script>
<script src="../js/common.js"></script>
<script>
    layui.config({
        base: '../js/'
    }).extend({
        formSelects: 'formSelects/formSelects-v4'
    });
    var $;
    layui.use(['jquery','form','validate','common','element', 'laydate','upload','formSelects'], function () {
        var form = layui.form,
            layer = layui.layer,
            validate = layui.validate,
            formSelects = layui.formSelects,
            upload = layui.upload,
            common = layui.common;
        $ = layui.jquery;

        validate.regVerify();

        var projectid=common.getUrlParam("projectid");
        var profession=common.getUrlParam("profession");
        var banzu_id=common.getUrlParam("profession");
//        var number=common.getUrlParam("number");

        var query = window.location.search.substring(1);
        var vars = query.split("&");
        var projectname=decodeURIComponent(vars[0].split("=")[1]);
        var company_name=decodeURIComponent(vars[2].split("=")[1]);
        var banzu_name=decodeURIComponent(vars[4].split("=")[1]);
        var number=decodeURIComponent(vars[6].split("=")[1]);
        var namelist=decodeURIComponent(vars[7].split("=")[1]);

        $("#number").val(number);
        var profession_name="";
        switch (profession)
        {
            case '1':profession_name="钢筋";break;
            case '2':profession_name="混泥土";break;
            case '3':profession_name="木工";break;
            case '4':profession_name="砖工";break;
            case '5':profession_name="其他";break;
        }

        form.val('dataForm', {
            projectname: projectname
            , companyname: company_name
            , profession: profession_name
        });
        form.render();

        common.initSelectData("#year","../project/getyear?ddtype=year");

        form.on('submit(formSubmit)', function (data) {

            var year = $("#year").find("option:selected").val();
            var month = $("#month").find("option:selected").val();
            var paynumber = $("#number").val();
            var pay = $("#pay").val();
            var expect_pay = $("#expect_pay").val();
            if(profession==""||year==""||month==""||pay=="")
            {
                common.showError('必填项不能为空!');
                return false;
            }
            var credentials=getFileNames();
            if(credentials==''){
                common.showError("请上传信任凭证！");
                return false;
            }

            data.field.projectname = projectname;
            data.field.projectid = projectid;
            data.field.companyname = company_name;
            data.field.profession = profession;
            data.field.year = year;
            data.field.month = month;
            data.field.paynumber = paynumber;
            data.field.pay = pay;
            data.field.expect_pay = expect_pay;
            data.field.id = banzu_id;
            data.field.banzu_name = banzu_name;
            data.field.credentials = credentials;
            $.ajax({
                type: 'post',
                url: '../project/banzuSend',
                data: {json: JSON.stringify(data.field)},
                success: function (rtn) {
                    if (rtn.code === 0) {  //数据保存成功
                        var msg = "保存成功!";
                        common.showInfo(msg, function () {
                            //刷新前页
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.document.getElementById('btnSearch').click();
                            parent.layer.close(index);
                        });
                    }
                    else {
                        common.showError(rtn.msg);
                    }
                },
                error: function (XmlHttpRequest, textStatus, errorThrown) {
                    common.showError('保存错误');
                }
            });
            return false;
        });
        
        //按钮事件绑定
        // $('.layui-btn').on('click', function () {
        //     var type = $(this).data('type');
        //     active[type] ? active[type].call(this) : '';
        // });

        //附件上传
        var uploadListView = $('#uploadList');//上传
        //上传
        var uploadListIns = upload.render({
            elem: '#btnChooseFiles'
            , url: '../person/fileUpload'
            , accept: 'file'
            , multiple: true
            , auto: false
            , exts: 'jpeg|jpg|png|gif|zip|rar|xls|xlsx|doc|docx|ppt|pptx|pdf|vsd|vsdx|txt|csv'
            , size: 1024 * 50
            , data: {
                filePt: function () {
                    return "credentialsBZ";
                }
            }
            , bindAction: '#btnUpoadAction'
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                var bl = true;
                obj.preview(function (index, file, result) {
                    var careId = $('#div_careNo').html();
                    var porf = file.name.substring(file.name.lastIndexOf("."), file.name.length);
                    var name = file.name.substring(0, file.name.lastIndexOf("."));
                    var names = getFileNames();
                    if (names.indexOf(name + "-" + careId + porf) > -1) {
                        if (bl == true) {
                            common.showError('文件名相同或已经上传过相同文件！');
                            bl = false;
                        }
                        return;
                    }
                    var tr = $(['<tr id="upload-' + index + '">'
                        , '<td>' + file.name + '</td>'
                        , '<td>等待上传</td>'
                        , '<td>'
                        , '<button class="layui-btn layui-btn-xs layui-btn-danger upload-delete">删除</button>'
                        , '</td>'
                        , '</tr>'].join(''));
                    //删除
                    tr.find('.upload-delete').on('click', function () {
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });
                    uploadListView.append(tr);
                });
            }
            , done: function (res, index, upload) {
                if (res && res.code===0) { //上传成功
                    var tr = uploadListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(0).html(res.data);
                    tds.eq(1).html('<span style="color: #5FB878;">上传成功</span>');
//        				tds.eq(3).html(''); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = uploadListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(1).html('<span style="color: #FF5722;">上传失败</span>');
            }
        });

        //附件名称
        function getFileNames() {
            var trs = uploadListView.find('tr');
            var res = '';
            $.each(trs, function (i, t) {
                var tds = $(t).children();
                var type = tds.eq(1).find('span').text();
                if (type == "上传成功") {
                    var name = tds.eq(0).html();
                    res += name + ",";
                }
            })
            if (common.endWith(res, ",")) {
                res = res.substring(0, res.length - 1);
            }
            return res;
        }
    })


</script>
</html>